<template>
	<view class="page-box">
		<view class="order" v-for="(item, index) in list" :key="item.id">
			<view class="order-info" @click="toDemandView(item)">
				<view class="u-font-32 font-medium u-m-b-20">{{item.title}}</view>
				<view class="u-flex">
					预算
					<view class="price u-flex-1">
						{{item.price}}
					</view>
					<text class="u-font-20 u-light-color">发布时间：{{item.add_time}}</text>
				</view>
			</view>
			<view class="order-action">
				<view class="u-light-color u-flex-1">
					<text v-if="item.status==2">申请接单 {{item.apply_num}}</text>
					<text v-if="item.status==3">{{item.status_name}}</text>
				</view>
				<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.status=='2'"
					@click="closeDemand(item.id)">关闭</u-button>
				<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.status<='0' "
					@click="deleteDemand(item.id)">删除</u-button>
				<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.status<='1'"
					@click="editDemand(item.id)">编辑</u-button>
				<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.status=='1'"
					@click="cancelDemand(item.id)">撤销审核</u-button>
				<u-button type="warning" size="mini" hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{backgroundColor:'#ffffff !important'}" plain v-if="item.apply_num>0 && item.status=='2'"
					@click="toApplyerView(item.id)">去查看</u-button>

				<!-- <u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.status=='3'">取消订单</u-button> -->
				<view v-if="item.status=='3'">
					<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
						:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.apply_status ==1"
						@click="toAction(item.apply_id)">取消订单</u-button>
					<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
						:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.apply_status ==2 || item.apply_status ==3"
						@click="toAction(item.apply_id)">申请退款</u-button>
					<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
						:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.apply_status ==2"
						@click="toAction(item.apply_id)">联系对方</u-button>
					<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
						@click="toAction(item.apply_id)" :customStyle="{color:'#999999',borderColor:'#D9D9D9'}"
						v-if="item.apply_status <=-4">查看详情</u-button>

					<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
						:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="[-1,-2,-3].includes(item.apply_status) "
						@click="deleteOrder(item.apply_id)">删除订单</u-button>

					<u-button plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
						:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="item.apply_status ==5 && item.is_reply"
						@click="toCommets(item.apply_id)">查看评论</u-button>
					<u-button type="warning" plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
						:customStyle="{backgroundColor:'#ffffff !important'}" v-if="item.apply_status ==1"
						@click="toAction(item.apply_id)">去支付</u-button>
					<u-button type="warning" plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
						:customStyle="{backgroundColor:'#ffffff !important'}" v-if="item.apply_status ==2"
						@click="toAction(item.apply_id)">查看服务码</u-button>
					<u-button type="warning" plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
						:customStyle="{backgroundColor:'#ffffff !important'}" v-if="item.apply_status ==5 && !item.is_reply"
						@click="toEvaluate(item.apply_id)">去评价</u-button>
					<u-button type="warning" plain size="mini" hover-class="none" shape="circle" class="u-m-l-20"
						:customStyle="{backgroundColor:'#ffffff !important'}" v-if="item.apply_status ==3 || item.apply_status ==4"
						@click="toAction(item.apply_id)">确认服务</u-button>
				</view>
			</view>
		</view>
		<u-modal v-model="deleteModal" @confirm="deleteHandle" ref="deleteModal" :async-close="true" title="确定要删除该需求吗？"
			content="删除后，无法恢复" show-cancel-button confirm-color="#FFAA44"></u-modal>
		<u-modal v-model="cancelModal" @confirm="cancelHandle" ref="cancelModal" :async-close="true" content="确定要撤销该需求的审核吗？"
			show-cancel-button confirm-color="#FFAA44"></u-modal>
		<u-modal v-model="closeModal" @confirm="closeHandle" ref="closeModal" :async-close="true" content="确定要关闭该需求信息吗？"
			show-cancel-button confirm-color="#FFAA44"></u-modal>
		<u-modal v-model="deleteOrderModal" @confirm="deleteOrderHandle" ref="deleteOrderModal" :async-close="true"
			content="确定要删除该订单吗？" show-cancel-button confirm-color="#FFAA44"></u-modal>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				deleteModal: false,
				cancelModal: false,
				closeModal: false,
				deleteOrderModal: false,
				currentId: ''
			}
		},
		methods: {
			// 删除
			deleteDemand(id) {
				this.currentId = id
				this.deleteModal = true
			},
			deleteHandle() {
				this.$u.api.deleteDemand(this.currentId).then(res => {
					this.deleteModal = false
					this.$emit('change')
				})
			},
			// 编辑
			editDemand(id) {
				this.currentId = id;
				this.$u.route('/pages/subpage/publish/demand', {
					id
				})
			},
			// 详情
			toDemandView(item) {
				if (item.status < 0 && item.status > -4) {
					this.$u.toast('订单已失效')
					return
				}
				if (item.status == 3) {
					this.$u.route('/pages/subpage/order/action_dem_user', {
						id: item.apply_id,
						type: 'order'
					})
				} else {
					this.$u.route('/pages/subpage/list/dem_detail', {
						id: item.id
					})
				}

			},
			// 查看申请人
			toApplyerView(id) {
				this.$u.route('/pages/subpage/profile/applyer', {
					id
				})
			},
			// 撤销审核
			cancelDemand(id) {
				this.currentId = id;
				this.cancelModal = true
			},
			cancelHandle() {
				this.$u.api.cancelDemand(this.currentId).then(res => {
						this.$emit('change')
					})
					.finally(() => {
						this.cancelModal = false
					})
			},
			// 关闭需求
			closeDemand(id) {
				this.currentId = id;
				this.closeModal = true
			},
			closeHandle() {
				this.$u.api.closeDemand(this.currentId).then(res => {
					this.$emit('change')
					this.$u.toast('需求已关闭')
				}).finally(() => {
					this.closeModal = false
				})
			},
			toAction(id) {
				this.$u.route('/pages/subpage/order/action_dem_user', {
					id,
					type: 'order'
				})
			},
			toEvaluate(id) {
				this.$u.route('/pages/subpage/order/evaluate', {
					id,
					role: 'user',
					type: 2
				})
			},
			toCommets(id) {
				this.$u.route('/pages/subpage/order/comments', {
					id,
					role: 'user',
					type: 2
				})
			},
			deleteOrder(id) {
				this.currentId = id;
				this.deleteOrderModal = true
			},
			deleteOrderHandle() {
				this.$u.api.deleteApply(this.currentId).then(res => {
					this.deleteOrderModal = false
					this.$emit('change')
					this.$u.toast('订单已删除')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-box {
		padding: 30rpx 30rpx 120rpx;

		.order {
			margin-bottom: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.order-info {
				padding: 30rpx 30rpx 20rpx;
				border-bottom: 0.5px solid #EEEEEE;
			}

			.order-action {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>